{% extends 'mathtesthome.html' %}

{% block body %}


<div class="main-content container">
    <div row>
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">新增试卷
                    <div class="tools"><span class="icon s7-cloud-download"></span><span class="icon s7-edit"></span>
                    </div>



                </div>
                <div class="panel-body">
                    <form method='POST' action='' enctype='multipart/form-data'>
                        {% csrf_token %}
                                     <div class="col-sm-6">
                            <div class="panel-heading">试卷名</div>
                    </div>
                           <div class="col-sm-6">
<input required="" class="form-control" name="examname"/>

                    </div>

                        <div>
                            <div class="panel-heading panel-heading-divider">- 选择题</div>
                            <table class="table table-bordered table-striped table-hover table-sm">
                                <thead class="online">
                                <tr>

                                    <th style="width:20%;">题目</th>
                                    <th style="width:5%;">答案</th>
                                    <th style="width:10%;"></th>
                                </tr>
                                </thead>
                                <tbody id='examchooseadd'>
                                <tr>

                                    <td>
                                        <div>
                                            <textarea  class="form-control" name="question1"></textarea>
                                        </div>

                                    </td>
                                    <td>
                                        <div>
                                            <input type="text" class="form-control" name="question1">
                                        </div>
                                    </td>

                                    <td>


                                    </td>
                                    <input type="hidden" class="form-control" name="question1" value="choose">

                                </tr>


                                </tbody>

                            </table>
                            <div class="col-lg-10">
                                <p class="text-right">
                                    <button type="button" class="btn btn-rounded btn-space btn-primary"
                                            onclick="add_choose_fields();"><i class="icon icon-left s7-plus"></i> 新增选择题
                                    </button>


                                </p>
                            </div>
                        </div>

                        <div>
                            <div class="panel-heading panel-heading-divider">- 填空题</div>
                            <table class="table table-bordered table-striped table-hover table-sm">
                                <thead class="online">
                                <tr>

                                    <th style="width:20%;">题目</th>
                                    <th style="width:5%;">答案</th>
                                    <th style="width:10%;"></th>
                                </tr>
                                </thead>
                                <tbody id='examfilladd'>
                                <tr>

                                    <td>
                                        <div>
                                            <textarea  class="form-control" name="question2"></textarea>
                                        </div>

                                    </td>
                                    <td>
                                        <div>
                                            <input type="text"  class="form-control" name="question2">
                                        </div>
                                    </td>

                                    <td>


                                    </td>
                                    <input type="hidden" class="form-control" name="question2" value="fill">

                                </tr>


                                </tbody>

                            </table>
                            <div class="col-lg-10">
                                <p class="text-right">
                                    <button type="button" class="btn btn-rounded btn-space btn-primary"
                                            onclick="add_fill_fields();"><i class="icon icon-left s7-plus"></i> 新增填空题
                                    </button>


                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="panel-heading panel-heading-divider">- 解答题</div>
                            <table class="table table-bordered table-striped table-hover table-sm">
                                <thead class="online">
                                <tr>

                                    <th style="width:20%;">题目</th>
                                    <th style="width:5%;">答案</th>
                                    <th style="width:10%;"></th>
                                </tr>
                                </thead>
                                <tbody id='examresolveadd'>
                                <tr>

                                    <td>
                                        <div>
                                            <textarea  class="form-control" name="question3"></textarea>
                                        </div>

                                    </td>
                                    <td>
                                        <div>
                                            <input type="text"  class="form-control" name="question3">
                                        </div>
                                    </td>

                                    <td>


                                    </td>

                                    <input type="hidden" class="form-control" name="question3" value="resolve">
                                </tr>


                                </tbody>

                            </table>
                            <div class="col-lg-10">
                                <p class="text-right">
                                    <button type="button" class="btn btn-rounded btn-space btn-primary"
                                            onclick="add_resolve_fields();"><i class="icon icon-left s7-plus"></i> 新增解答题
                                    </button>


                                </p>


                            </div>

                        </div>
                        <div class="col-lg-10">
                            <p class="text-right">
                                <button type="submit" class="btn btn-rounded btn-danger btn-primary btn-lg">
                                    <i class="icon icon-left s7-paper-plane"></i> 提交
                                </button>
                            </p>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>


</div>


{% endblock %}
{% block extendscript%}
<script>
var service = {
removeRow:function(el){
        $(el).closest('tr').remove();
   }
}

var room = 3;

function add_choose_fields() {
    room++;
    //var content = '<td><a onclick="service.removeRow(this);" href="javascript:void(0);"> <i class="s7-trash"></i></a></td>'
    var content='  <td><div ><textarea required="" class="form-control" name="question'+room+'"></textarea></div></td><td><div><input type="text" required  class="form-control" name="question'+room+'"></div></td><td> <button class="btn btn-rounded btn-space btn-primary" onclick="service.removeRow(this);"><i class="icon icon-left s7-close"></i> 删除</button></td> <input type="hidden"  class="form-control" name="question'+room+'" value="choose">'
    var objTo = document.getElementById("examchooseadd")
    var divtest = document.createElement("tr");
    //divtest.setAttribute("class", "online" );
    //divtest.setAttribute("id", "room" + room);
    //divtest.innerHTML = '<div class="label">Room ' + room + ':</div><div class="content"><input type="text" class="form-control" name="' + room + '"></div><a href="#" class="icon" onclick="remove_fields(this);"><i class="s7-trash"></i></a>';
    divtest.innerHTML = content
    objTo.appendChild(divtest);
}
function add_fill_fields() {
    room++;
    var content='  <td><div ><textarea required="" class="form-control" name="question'+room+'"></textarea></div></td><td><div><input type="text" required  class="form-control" name="question'+room+'"></div></td><td> <button class="btn btn-rounded btn-space btn-primary" onclick="service.removeRow(this);"><i class="icon icon-left s7-close"></i> 删除</button></td> <input type="hidden"  class="form-control" name="question'+room+'" value="fill">'
    var objTo = document.getElementById("examfilladd")
    var divtest = document.createElement("tr");
    divtest.innerHTML = content
    objTo.appendChild(divtest);
}
function add_resolve_fields() {
    room++;
    var content='  <td><div ><textarea required="" class="form-control" name="question'+room+'"></textarea></div></td><td><div><input type="text" required  class="form-control" name="question'+room+'"></div></td><td> <button class="btn btn-rounded btn-space btn-primary" onclick="service.removeRow(this);"><i class="icon icon-left s7-close"></i> 删除</button></td> <input type="hidden"  class="form-control" name="question'+room+'" value="resolve">'
    var objTo = document.getElementById("examresolveadd")
    var divtest = document.createElement("tr");
    divtest.innerHTML = content
    objTo.appendChild(divtest);
}






</script>
{% endblock %}